<template>
	<view v-if="show">

		<!-- 办理流程弹层 -->
		<u-popup v-model="isShow" closeable mode="bottom" :round="true"  @close="onClose"  :height="visa.showAddNew == 0 ? '60%' : '90%'" class="u-popup" >
			<view v-if="!bindPhoneShow" class="info-box" >
				<view class="info-title">出行信息</view>
				<view class="info-data">
					<!-- <view class="info-row">
		          <text>预计出行日期</text>
		          <text>最早可出行：2019-11-02</text>
		        </view> --> 
<!-- 					<view class="choose-date" @click="chooseDateOpen">  
						<u-field label-width="180"  v-model="chooseDate" label="出行日期" placeholder="选择日期"  :disabled="true" :clearable="false" :border="true":error-message="chooseDateMessage" input-align="left" >
							  <u-icon slot="icon" name="calendar" :color="themeColor" size="40"/> 
						</u-field> 
					</view> -->
					<!-- <view class="choose-date" v-if="role>0">
						<u-field v-model="mobile" placeholder="请输入联系电话" label="电话" type="number" left-icon="phone-o"
							:border="true" maxlength="11"   title-width="120rpx">
							<view slot="right-icon">(凭此号码查询订单)</view>
						</u-field>
					</view> -->
					<view class="choose-date" v-if="visa.showAddNew == 0"> 
						<u-field label-width="220" v-model="population" placeholder="请输入出行人数" label="预计出行人数" type="number" maxlength="2" :border="true" :error-message="populationMessage" >
							  <u-icon slot="icon" name="plus-people-fill" :color="themeColor" size="40"/> 
						</u-field>
					</view>

					<view class="visa-people" v-if="visa.showAddNew == 1">
						<view class="visa-p-t">
							<view>
								<text>申请人信息</text>
								<text>（{{contact.length}}人）</text>
							</view>
							<view>
								<view class="friends-btn" @click="addNewContact">
									<u-icon name="plus" size="30" />
									<text>新增申请人</text>
								</view>
							</view>
						</view>

						<view class="people-list">
							<view class="people-item" v-for="(item,index) in contact" :key="index">
								<view class="choose-date">
									<view class="row ">
											<u-field @input="change($event,'applicantName',index)" v-model="item.applicantName" placeholder="请输入姓名" :error-message="item.errorMessage" label-width="0"> </u-field> 
											<u-button  :color="themeColor"  shape="circle" size="mini" @click="showPopupPeople(item,index)"  >
												<view class="people-change" >
													<text>{{ item.identity || "请选择身份"}}</text>
													<u-icon name="arrow-down" size="20" :color="themeColor" />
												</view> 
											</u-button> 
										 
									
									</view>
								</view>
								<u-icon v-if="contact.length>1" name="trash-fill" size="60"   @click="delContcat(index)" />
							</view>
						</view>
					</view>
				</view>
				<view class="bom-btn">
					<button hairline @click="reNext" color="#0A6FFF"  :style="'color:#fff;background-color: '+themeColor +';border: 1rpx solid '+themeColor+';'">
						<text>下一步</text>
					</button>
				</view>
			</view>

			<view v-else class="bindPhone-view">
				<view class="info-title" @click="gotoNextBack">
					<u-icon name="arrow-left" />
					<text>上一步</text>
				</view>
				<view class="tips">填写手机号，轻松查询订单，及时跟进出签状态</view>
				<u-cell-group class="send-code-form">
					<u-field v-model="mobile" clearable label="手机号" maxlength="11 "  
						placeholder="请输入手机号" type="number">
						<u-button slot="button" :color="themeColor" size="small" type="primary" @click="sendCode">
							{{count}} </u-button>
					</u-field>
					<u-field v-model="code" label="验证码" placeholder="请输入验证码"  :border="false" />
				</u-cell-group>

				<view class="bom-btn">
					<u-button square type="primary" size="large" :color="themeColor" @click="bind">确定</u-button>
				</view>
			</view>
		</u-popup>

		<!-- <yycalendar @yybindchange="_yybindchange" v-show="yyShow" title="出行日期" themeColor="#0A6FFF" monthCount="6"
			dateTitle="" dateSubTitle="" /> -->
		<u-calendar  v-model="yyShow"  @formatter="calendarFormatter" color="#0A6FFF" confirm-text="完成" @confirm="_yybindchange" @change="_yybindchange" :minDate="minDate" :maxDate="maxDate"/>
		 <!-- 职位身份 -->
		<u-popup v-model="showPeople" closeable mode="bottom" :round="true" safe-area-inset-top="true"
			 @close="onClosePeople" class="data-info-popup"  :height="visa.showAddNew == 0 ? '60%' : '90%'">
			<view class="info-box">
				<view class="info-title">选择申请人身份</view>
				<view class="info-data">
					<view class="tips"> <text>不同身份类型，签证资料可能会有区别</text> </view>
					<block v-for="(item,index) in docList" :key="index">
						<view class="info-data-item " :class="showPeopleItem.identity == item.cn_name ? 'info-data-active':''" @click="showPeopleChange(index)">
							<text>{{item.cn_name}}</text>
						</view>
					</block>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import index from './startapply.js'
	export default {
		...index,
	}
</script>

<style scoped>
	@import "./startapply.css";
</style>

